<template>
  <common-page>
    <AuthFormCard>
      <template v-slot:form>
        <el-form
            label-position="top"
            label-width="100px"
            :model="registerUser"
            :rules="registerRules"
            ref="ruleFormRef"
            @keydown.enter="registerSubmit(ruleFormRef)"
        >

          <el-form-item :label="AuthLang.label.mail" prop="email">
            <el-input clearable size="large" :placeholder="AuthLang.rules.mailValidate" v-model="registerUser.email"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.nickname" prop="nickname">
            <el-input clearable size="large" :placeholder="AuthLang.rules.nicknameValidate"
                      v-model="registerUser.nickname"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.password" prop="password">
            <el-input clearable show-password size="large" :placeholder="AuthLang.rules.passwordValidate"
                      v-model="registerUser.password"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.rePassword" prop="rePassword">
            <el-input clearable show-password size="large" :placeholder="AuthLang.rules.passwordReInput"
                      v-model="registerUser.rePassword"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.code" prop="ecode">
            <auth-code/>
          </el-form-item>

        </el-form>
      </template>
      <template v-slot:footer>
        <div>
          <el-button
              round
              type="primary" @click="registerSubmit(ruleFormRef)">注册
          </el-button>
        </div>
        <div>
          <el-button
              round
              type="success" @click="$router.push({name:'login'})">返回
          </el-button>
        </div>

      </template>
    </AuthFormCard>
  </common-page>

</template>

<script lang="ts">
import AuthFormCard from "@/components/auth/AuthFormCard.vue";
import {RegisterUser} from "@/entity/auth/AuthEntity";
import {reactive, ref, toRaw} from "vue";
import {registerRules} from "@/entity/auth/AuthRules";
import AuthCode from "@/components/auth/AuthCode.vue";
import {FormInstance} from "element-plus";
import {AuthStore} from "@/store/AuthStore";
import {Message} from "@/utils/Message";
import {MailStore} from "@/store/MailStore";
import {storeToRefs} from "pinia";
import {AuthLang} from "@/lang/auth/AuthLang";
import {useRouter} from "vue-router";
import {BusinessCode} from "@/lang/Common";
import CommonPage from "@/App.vue";

export default {
  name: "RegisterPage",
  components: {CommonPage, AuthCode, AuthFormCard},
  setup() {

    const router = useRouter();

    const authStore = AuthStore();
    const mailStore = MailStore();

    const ruleFormRef = ref<FormInstance>();

    const {ecode, email} = storeToRefs(mailStore);
    mailStore.$reset();

    // 表单初始化
    const registerUser: RegisterUser = reactive({
      email: email,
      nickname: "",
      password: "",
      rePassword: "",
      ecode: ecode
    });

    // 二次密码的逻辑要单独书写
    registerRules.rePassword = [
      {
        required: true, message: AuthLang.rules.passwordReInput, trigger: "blur"
      },
      {
        required: true, validator: (rule, value, callback) => {
          value === registerUser.password ? callback() : callback(new Error(AuthLang.rules.unSamePassword));
        },
        trigger: "blur"
      }
    ];


    const registerSubmit = async (formEl: FormInstance | undefined) => {
      formEl?.validate(isValid => {
        console.log(isValid);
        if (isValid) {
          let temp = toRaw(registerUser);
          // 根据Store获取输入的邮箱验证码
          temp.email = mailStore.email;
          temp.ecode = mailStore.ecode;
          let t = {...temp};
          // 向后台发起注册请求
          authStore.register(t).then(res => {
            if (res?.data?.code == BusinessCode.Ok) {
              Message.success(AuthLang.ok.register);
              ruleFormRef.value?.resetFields();
              mailStore.$reset();
              router.push({name: "login"});
            }
          });
        }
      });
    };


    return {
      registerUser,
      registerRules,
      ruleFormRef,
      registerSubmit,
      AuthLang
    };
  },
};
</script>

<style>
</style>